<template>
	<!-- 上传 S -->
	<view class="img-list">
		<!-- 上传列表 -->
		<view class="upload-video">
			<block wx:if="{{src != ''}}">
				<video src="{{src}}" class="img-li"></video>
				<image class="icon-deletes" src="../../../img/icon/icon-delete.png" bindtap="deleteVideo"></image>
			</block>
		</view>
		<block wx:for="{{imgList}}" wx:key="index">

			<!-- 视频 S -->
			<view class="img-li" wx:if="{{src == ''}}" bindtap="chooseVideo">
				<image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image>
			</view>
			<!-- 视频 E -->
	</view>
	<!-- 上传 E -->
</template>

<script>
	import OSS from 'ali-oss'
	import uploadFile from "@/util/uploadFile";
	var that;
	export default {
		data() {
			return {
				delet: "https://oss.xxx.com.cn/web/tempProject/applyClosed.png",
				addImg: "https://oss.xxx.com.cn/web/tempProject/addImg.png",
				quiz_upImg: 'https://oss.xxx.com.cn/web/tempProject/quiz_upImg.png',
				locVideoUrl: '',
			};
		},
		onLoad() {
			that = this;
		},
		methods: {
			/**
			   * 选择视频
			   */
			  chooseVideo: function() {
			    var _this = this;
			    wx.chooseVideo({
			      success: function(res) {
			        _this.setData({
			          src: res.tempFilePath,
			        })
			      }
			    })
			  },
			  /**
			   * 上传视频 目前后台限制最大100M, 以后如果视频太大可以选择视频的时候进行压缩
			   */
			  uploadvideo: function() {
			    var src = this.data.src;
			    wx.uploadFile({
			      url: '',
			      methid: 'POST',           // 可用可不用
			      filePath: src,
			      name: 'files',              // 服务器定义key字段名称
			      header: app.globalData.header,
			      success: function() {
			        console.log('视频上传成功')
			      },
			      fail: function() {
			        console.log('接口调用失败')
			      }
			    })
			  },
		}
	};
</script>

<style lang="scss" scoped>
	.quiz {
		margin: 36rpx;
		position: relative;
		color: #102841;
		padding-bottom: 180rpx;

		.mainAddpic {
			width: 100%;
			padding: 40rpx 28rpx 50rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;

			.ThreePic {
				display: flex;
				// justify-introduce: space-around;
				flex-wrap: wrap
			}

			.addPic {
				width: 100%;
				padding-left: 10rpx;
				padding-bottom: 10rpx;
				border-bottom: 1px solid #E5F1FF;

				span:nth-child(1) {

					font-family: PingFangSC-Medium, PingFang SC;
					font-size: 28rpx;
					color: grey;
					font-weight: bold;
				}

				span:nth-child(2) {
					font-size: 24rpx;
					color: #999;
				}
			}

			.picMore {
				width: 170rpx;
				height: 170rpx;
				border-radius: 8rpx;
				display: flex;
				margin: 30rpx auto 10rpx;
				position: relative;
				// border: 1px dashed #ccc;


				image {
					width: 88rpx;
					height: 88rpx;
					margin: 0 auto;
				}

				.add1 {
					width: 186rpx;
					height: 186rpx;
					border-radius: 8rpx;
				}

				.delete {
					position: absolute;
					right: 0;
					top: 0;
					z-index: 2;
					width: 40rpx;
				}

				.addPic1 {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.quiz_upImg {
			width: 212rpx;
			height: 212rpx;
			position: relative;
			left: 50%;
			margin-left: -106rpx;
			margin-top: 40rpx;
		}

		.title {
			// height: 100rpx;
			position: relative;
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
		}

		.title2 {
			margin-top: 80rpx;
		}

		.title3 {
			margin-top: 60rpx;
		}

		textarea {
			width: 83.8vw;
		}

		.xuanzhe {
			width: 83.8vw;
			position: relative;
			top: 22rpx;
			padding: 24rpx;
			background: #fcfcfc;
			border-radius: 14rpx;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);

			.rrr {
				width: 12rpx;
				height: 22rpx;
				position: absolute;
				right: 30rpx;
				margin-top: 10rpx;
				z-index: 3;
			}
		}

		textarea {
			position: relative;
			top: 22rpx;
			padding: 24rpx;
			background: #fcfcfc;
			border-radius: 14rpx;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);
		}

		.textarea1 {
			height: 70rpx;
		}

		.textarea2 {
			margin-top: 26rpx;
			height: 200rpx;
		}

		.btn {
			position: relative;
			margin: auto;
			margin-top: 34rpx;
			border-radius: 10rpx;
			height: 70rpx;
			line-height: 70rpx;
			width: 220rpx;
			left: 50%;
			margin-left: -110rpx;
			background-color: #102841;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
		}

		.list {
			margin-top: 40rpx;

			.item {
				width: 90%;
				padding-bottom: 0rpx;
				min-height: 80rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);
				border-radius: 12rpx;
				margin: auto;
				position: relative;
				margin-bottom: 28rpx;

				.red_point {
					margin-top: -6rpx;
					margin-right: 14rpx;
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: red;
					position: absolute;
					right: 4rpx;
				}

				.txt {
					line-height: 96rpx;
					// height: 36rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #102841;
					margin-left: 30rpx;
					width: 470rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

			}
		}
	}
</style>